<!--
 * @Date: 2024-02-27 16:01:53
 * @Auth: 873768511@qq.com
 * @LastEditors: 873768511@qq.com
 * @LastEditTime: 2024-02-29 11:08:17
 * @FilePath: \ztc-web\src\views\overview\components\leftPie.vue
-->
<template>
  <div class="content">
    <div id="leftPie" class="chart"></div>
    <ul v-if="!!info.name" class="info">
      <li style="font-size: 16px;font-weight: bold;margin-bottom: 10px;">{{ info.name }}</li>
      <li>累计预警&nbsp{{info.info.ljNum}}&nbsp次</li>
      <li>全年累计&nbsp{{info.info.qnNum}}&nbsp次</li>
      <li>本月预警&nbsp{{info.info.byNum}}&nbsp次</li>
      <li>本周预警&nbsp{{info.info.bzNum}}&nbsp次</li>
      <li>同比上月
        <span v-if="info.info.syNum!==0" :style="{color:info.info.syNum>0?'#cd3f59':'#56b208'}">
          &nbsp{{ info.info.syNum>0?'上升':'下降' }}
        </span>
        &nbsp{{info.info.syNum}}%</li>
    </ul>
  </div>

</template>

<script setup>
import * as echarts from "echarts";
import { onMounted } from "vue";
import { getAlarmAnalyst } from "@/api/screen"
const data = ref([])
const info = ref({})
function getData () {
  data.value = []
  getAlarmAnalyst().then(res => {
    res.data.forEach((item,index) => {
      const obj = {
        value: item.num,
        name: item.tyeName,
        ...item
      }
      data.value.push(obj)
      if (index === 0) {
        info.value = {...obj}
      }
    })
    init()
  })
}
function init () {
  let myChart = echarts.init(document.getElementById('leftPie'), null, {
    renderer:"svg",
  })
  myChart.setOption({
    backgroundColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
      { offset: 0, color: 'rgba(11, 53, 100, 0.00)' },
			{ offset: 1, color: 'rgba(11, 53, 100, 1.00)' }
		]),
    color:['#157cdd','#11a7a9','#29a751','#d5af14','#cd3f58'],
		grid: {
      left: '5%',
      right: '10%',
      top:'20%',
      bottom: '15%',
      containLabel: true
		},
    tooltip: {
      trigger: 'item'
    },
    legend: {
      show: false,
    },
    labelLine: {
      lineStyle: {
        color: null
      },
      show: true,
      length: 0,
      minTurnAngle:0
    },
    label: {
      // width: 100,
      fontSize: 12,
      formatter: '{b} ' + '{d}%'
    },
    series: [
      {
        type: 'pie',
        center: ['35%', '50%'],
        radius: ['40%', '60%'],
        data: data.value,
      }
    ]
  })
  const Chart = myChart
  // 设置默认选中高亮部分??
  Chart.dispatchAction({
    type: 'highlight',
    dataIndex: 0
  })
  Chart.on('mouseover', function(e) {
    // 当检测到鼠标悬停事件，取消默认选中高亮
    // if (e.dataIndex === 0) {
    //   return
    // } else {
    info.value = Object.assign({}, e.data)
    Chart.dispatchAction({
      type: 'downplay'
    })
    // 高亮显示悬停的那块
    Chart.dispatchAction({
      type: 'highlight',
      dataIndex: e.dataIndex
      })
      // }
    })
    // 检测鼠标移出后显示之前默认高亮的那块
    Chart.on('mouseout', function(e) {
      Chart.dispatchAction({
        type: 'highlight',
        dataIndex: e.dataIndex
      })
    })
}
onMounted(() => {
  getData()
})
</script>

<style lanf="scss" scoped>
.content{
  height: calc(100% - 40px);
  width: 100%;
  position: relative;
}
.chart{
  height: 100%;
  width: 100%;
  padding: 10px 10px;
  box-sizing: border-box;
}
.info{
  position: absolute;
  right: 0;
  top: 50%;
  transform: translate(-40%, -60%);
  list-style: none;
  font-size: 14px;
  >li{
    margin-bottom: 6px;
  }
}
</style>